$width-all:1280px;
$width:976px;
$bgc:#f6f6f6;

@mixin middle($top:0px, $bottom:0px) {
  margin: $top auto $bottom;
}

.big-pic {
  height: 220px;
  width: $width-all;
  @include middle();
}

section {
  @include middle();
  height: 1510px;
  width: $width-all;
  background-color: $bgc;
  font-size: 0;

  >.all {
    @include middle();
    width: $width;
    height: 1208px;
    box-sizing: border-box;

    >p {
      padding: {
        top: 21px;
        bottom: 34px;
      }

      font-size: 14px;
      color: #626262;
    }

    >.top {
      margin-bottom: 29px;
      height: 129px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      >.top-1 {
        width: 292px;
        height: 100%;
        background-color: #2072f9;

        >.p-1 {
          @include middle();
          padding-top: 36px;
          height: 24px;
          width: 144px;
          font-size: 24px;
          color: white;
        }
      }

      >.top-2 {
        @extend .top-1;
        width: 207px;
        background-color: #cac9c9;

        >.p-2 {
          @extend .p-1;
          width: 96px;
          color: #000;
        }
      }

      >.top-3 {
        @extend .top-2;
        width: 233px;

        >.p-3 {
          @extend .p-2;
          width: 144px;
        }
      }

      >.top-4 {
        @extend .top-2;
        width: 222px;

        >.p-4 {
          @extend .p-2;
        }
      }
    }

    >.search {
      margin-bottom: 26px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;

      >input {
        padding-left: 6px;
        box-sizing: border-box;
        width: 301px;
        height: 50px;
        border: 1px solid #434343;
        background-color: $bgc;
        color: #8f8e8e;
        border-right: none;
      }

      >.pic {
        width: 57px;
        height: 50px;
        background-color: #434343;

        >img {
          margin: {
            left: 15px;
            top: 11px;
          }
        }
      }
    }

    >.main {
      height: 804px;
      width: $width;
      background-color: #fff;
      font-size: 0;

      border: {
        left: 1px solid #dcdcdc;
        top: 1px solid #dcdcdc;
      }

      >.main-top {
        display: flex;
        flex-direction: row;

        .main-top1 {
          width: $width;
          height: 268px;

          .top1-left {
            width: 324px;
            height: 267px;

            border: {
              right: 1px solid #dcdcdc;
              bottom: 1px solid #dcdcdc;
            }

            >.pic {
              @include middle(0,30px);
              height: 159px;
              display: flex;
              justify-content: center;

              >img {
                height: 100%;
                padding-top: 20px;
              }
            }

            >p {
              font-size: 18px;
              color: #2072f9;
              line-height: 34px;
              text-align: center;
            }

            >p:last-of-type {
              font-size: 12px;
              color: #3e3e3e;
            }
          }
        }
      }
    }

    >.page {
      height: 100px;
      vertical-align: bottom;
      display: flex;
      align-items: flex-end;
      justify-content: center;

      >button {
        width: 60px;
        height: 48px;
        border: none;
        background-color: $bgc;
        font-size: 18px;
        color: #777676;
      }

      >button:nth-last-of-type(7) {
        background-color: #2072f9;
        color: white;
      }

      >button:nth-last-of-type(8),
      >button:last-of-type {
        width: 100px;
      }
    }


  }
}